import React from 'react';
import Add from './add.svg';
import Image from 'next/image';
import Top1 from './assets/top1.svg';
import Top2 from './assets/top2.svg';
import Top3 from './assets/top3.svg';
export default function Icon(props) {
  const { type } = props;

  const menu1 = (
    <div>
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M4 6.09375C4 5.62793 4.38393 5.25 4.85714 5.25H19.1429C19.6179 5.25 20 5.62793 20 6.09375C20 6.56133 19.6179 6.9375 19.1429 6.9375H4.85714C4.38393 6.9375 4 6.56133 4 6.09375ZM4 11.7188C4 11.2512 4.38393 10.875 4.85714 10.875H19.1429C19.6179 10.875 20 11.2512 20 11.7188C20 12.1863 19.6179 12.5625 19.1429 12.5625H4.85714C4.38393 12.5625 4 12.1863 4 11.7188ZM19.1429 18.1875H4.85714C4.38393 18.1875 4 17.8113 4 17.3438C4 16.8762 4.38393 16.5 4.85714 16.5H19.1429C19.6179 16.5 20 16.8762 20 17.3438C20 17.8113 19.6179 18.1875 19.1429 18.1875Z"
          fill="#37455C"
        />
      </svg>
    </div>
  );
  const menu2 = (
    <div className="bg-transparent border-none btn btn-square btn-link">
      <svg
        width="36"
        height="36"
        viewBox="0 0 36 36"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect
          x="2"
          y="2"
          width="32"
          height="32"
          rx="8"
          fill="url(#paint0_linear_842_1487)"
        />
        <rect x="12" y="17" width="12" height="2" rx="1" fill="white" />
        <rect
          x="17"
          y="24"
          width="12"
          height="2"
          rx="1"
          transform="rotate(-90 17 24)"
          fill="white"
        />
        <defs>
          <linearGradient
            id="paint0_linear_842_1487"
            x1="8.02214"
            y1="28.6667"
            x2="39.1646"
            y2="12.9027"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#FFC400" />
            <stop offset="1" stop-color="#FEE278" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  );
  const wechat = (
    <div>
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M14.2222 1H4.44444C3.4625 1 2.66667 1.89531 2.66667 3V10C2.66667 11.1047 3.4625 12 4.44444 12H14.2222C15.2042 12 16 11.1047 16 10V3C16 1.89531 15.2028 1 14.2222 1ZM14.6667 10C14.6667 10.2757 14.4673 10.5 14.2222 10.5H13.7778L10.7417 5.47188C10.6583 5.33438 10.5194 5.25 10.3694 5.25C10.2208 5.25 10.0819 5.3335 9.99972 5.47266L8.25694 8.41359L7.63611 7.45625C7.55278 7.325 7.41944 7.25 7.27778 7.25C7.13586 7.25 7.00239 7.32628 6.91861 7.45544L4.88889 10.5H4.44444C4.19939 10.5 4 10.2757 4 10V3C4 2.72431 4.19939 2.5 4.44444 2.5H14.2222C14.4673 2.5 14.6667 2.72431 14.6667 3V10ZM6.22222 3.5C5.73139 3.5 5.33333 3.94781 5.33333 4.5C5.33333 5.05219 5.73139 5.5 6.22222 5.5C6.71333 5.5 7.11111 5.05219 7.11111 4.5C7.11111 3.94781 6.71389 3.5 6.22222 3.5ZM12.6667 15H3.33333C1.49528 15 0 13.3188 0 11.25V3.75C0 3.3375 0.298611 3 0.666667 3C1.03472 3 1.33333 3.3375 1.33333 3.75V11.25C1.33333 12.4906 2.23056 13.5 3.33333 13.5H12.6667C13.0347 13.5 13.3333 13.8359 13.3333 14.25C13.3333 14.6641 13.0361 15 12.6667 15Z"
          fill="white"
        />
      </svg>
    </div>
  );
  const share = (
    <svg
      width="14"
      height="16"
      viewBox="0 0 14 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M14 4C14 5.65625 12.6562 7 11 7C10.0969 7 9.2875 6.6 8.7375 5.96875L5.93437 7.37187C5.97812 7.575 5.97188 7.78438 5.97188 7.97188C5.97188 8.21563 5.97812 8.425 5.93437 8.62813L8.7375 10.0031C9.2875 9.4 10.0969 8.97188 11 8.97188C12.6562 8.97188 14 10.3156 14 12C14 13.6562 12.6562 15 11 15C9.31563 15 8 13.6562 8 12C8 11.7844 8.02188 11.575 8.06563 11.3719L5.2625 9.96875C4.7125 10.6 3.90313 11 3 11C1.34312 11 0 9.65625 0 7.97188C0 6.31563 1.34312 4.97188 3 4.97188C3.90313 4.97188 4.7125 5.4 5.2625 6.00313L8.06563 4.62813C8.02188 4.425 8 4.21563 8 4C8 2.34312 9.31563 1 11 1C12.6562 1 14 2.34312 14 4ZM2.97187 9.5C3.82812 9.5 4.47188 8.82812 4.47188 8C4.47188 7.17188 3.82812 6.5 2.97187 6.5C2.17156 6.5 1.47187 7.17188 1.47187 8C1.47187 8.82812 2.17156 9.5 2.97187 9.5ZM11 2.5C10.1719 2.5 9.5 3.17188 9.5 4C9.5 4.82812 10.1719 5.5 11 5.5C11.8281 5.5 12.5 4.82812 12.5 4C12.5 3.17188 11.8281 2.5 11 2.5ZM11 13.5C11.8281 13.5 12.5 12.8281 12.5 12C12.5 11.1719 11.8281 10.5 11 10.5C10.1719 10.5 9.5 11.1719 9.5 12C9.5 12.8281 10.1719 13.5 11 13.5Z"
        fill="white"
      />
    </svg>
  );
  const Top1Icon = (
    // <Image src={Top1} alt=""></Image>
    <Top1></Top1>
  );
  const Top2Icon = (
    // <Image src={Top2} alt=""></Image>
    <Top2></Top2>
  );
  const Top3Icon = (
    // <Image src={Top3} alt=""></Image>
    <Top3></Top3>
  );
  const iconList = {
    menu1: menu1,
    add: menu2,
    wechat: wechat,
    share: share,
    top1: Top1Icon,
    top2: Top2Icon,
    top3: Top3Icon,
  };
  return iconList[type];
}
